<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bindEvent</title>
    <link rel="stylesheet" href="https://www.unpkg.com/ew-color-picker/dist/ew-color-picker.min.css">
    <style>
        /* body,
        html {
            margin: 0;
            padding: 0;
        } */

        #box {
            width: 200px;
            height: 200px;
            background-color: #f00;
            position: relative;
            margin: 15px;
        }

        #demo {
            width: 15px;
            height: 15px;
            background-color: #0f0;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="demo"></div>
    </div>
</body>
<script src="https://www.unpkg.com/ew-color-picker/dist/ew-color-picker.js"></script>
<script>
    // const color = new ewColorPicker();
    const box = ewColorPicker.util.$("#box");
    const demo = ewColorPicker.util.$("#demo");
    const util = ewColorPicker.util;
    // color.bindEvent(demo, (context, el, x, y) => {
    //     const rect = util.getRect(box);
    //     const left = Math.max(0, Math.min(x - rect.x, rect.width - 15));
    //     const top = Math.max(0, Math.min(y - rect.y, rect.height - 15));
    //     util.setSomeCss(el, [
    //         {
    //             prop: "left",
    //             value: left + 'px'
    //         },
    //         {
    //             prop: "top",
    //             value: top + 'px'
    //         }
    //     ]);
    // });
    util.bindEvent(demo, (context, el, x, y) => {
        const rect = util.getRect(box);
        const left = Math.max(0, Math.min(x - rect.x, rect.width - 15));
        const top = Math.max(0, Math.min(y - rect.y, rect.height - 15));
        util.setSomeCss(el, [
            {
                prop: "left",
                value: left + 'px'
            },
            {
                prop: "top",
                value: top + 'px'
            }
        ]);
    });
</script>

</html>